<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="line-big">
	<div class="xl3">
		<div class="panel border-back">
			<div class="panel-body text-center">
				<h1>
					<strong>① 选择商品类别</strong>
				</h1>
				<h3 class="margin-top">
					*所选类别：<span class="text-white bg-blue radius-big" id="goods_type_id_div" data-value=""></span>
				</h3>
			</div>
			<div class="panel-foot bg-back border-back">
				<div class="content_wrap">
					<div class="zTreeDemoBackground left">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
			<div class="panel-foot">
				<span class="icon-info-circle"></span> 选择最后一级分类，更有利于你的商品被找到。
			</div>
		</div>
	</div>
	<div class="xl9">
		<div class="panel border-back" id="write_goods_info_div">
			<div class="panel-body text-center">
				<h1>
					<strong>② 填写商品信息</strong>
				</h1>
			</div>
			<div class="panel-foot bg-white border-back">
				<div class="line-big">
					<div class="xl6">
						<div class="label">
							<label for="goodsName">*商品名称(2-50个字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsName" value="${goods.goodsName }" data-regex="^\S.{0,48}\S$" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsPrice">*商品价格(最多两位小数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsPrice" value="${goods.goodsPrice }" data-regex="^(0|[1-9][0-9]{0,9})(.[0-9]{1,2})?$" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsCommission">*商品佣金(最多两位小数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsCommission" value="${goods.goodsCommission }" data-regex="^(0|[1-9][0-9]{0,9})(.[0-9]{1,2})?$" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsInventoryNumber">*商品库存数量(整数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsInventoryNumber" value="${goods.goodsInventoryNumber }" data-regex="^([1-9]\d*)|0$" />
						</div>
					</div>
				</div>
				<div class="line-big margin-big-top">
					<div class="xl2">
						<div class="label">
							<label for="goodsOperationMode">*商品运营模式</label>
						</div>
						<div class="field">
							<select class="input" id="goodsOperationMode">
								<option value="西普茗茶">西普茗茶</option>
								<option value="西普茗茶">西普茗茶</option>
							</select>
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsOriginalPrice">商品原价格(最多两位小数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsOriginalPrice" value="${goods.goodsOriginalPrice }" data-regex="(^(0|[1-9][0-9]{0,9})(.[0-9]{1,2})?$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsDiscount">商品折扣(最多两位小数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsDiscount" value="${goods.goodsDiscount }" data-regex="(^(0|[1-9][0-9]{0,9})(.[0-9]{1,2})?$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsMinBuyNumber">最少购买件数(整数)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsMinBuyNumber" value="${goods.goodsMinBuyNumber }" data-regex="(^[1-9]\d*$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsBrand">商品品牌(2-50字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsBrand" value="${goods.goodsBrand }" data-regex="(^\S.{0,48}\S$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsItemId">商品货号(2-50字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsItemId" value="${goods.goodsItemId }" data-regex="(^\S.{0,48}\S$)|(^\S{0}$)" />
						</div>
					</div>
				</div>
				<div class="line-big margin-big-top">
					<div class="xl6">
						<div class="label">
							<label for="goodsTips">商品提示(4-200字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsTips" value="${goods.goodsTips }" data-regex="(^\S.{2,198}\S$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsHscode">商品HS编码(2-50字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsHscode" value="${goods.goodsHscode }" data-regex="(^\S.{0,48}\S$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsCiqGoodsNo">国检备案号(2-50字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsCiqGoodsNo" value="${goods.goodsCiqGoodsNo }" data-regex="(^\S.{0,48}\S$)|(^\S{0}$)" />
						</div>
					</div>
					<div class="xl2">
						<div class="label">
							<label for="goodsCustomsListNo">海关备案号(2-50字)</label>
						</div>
						<div class="field">
							<input type="text" class="input" id="goodsCustomsListNo" value="${goods.goodsCustomsListNo }" data-regex="(^\S.{0,48}\S$)|(^\S{0}$)" />
						</div>
					</div>
				</div>
				<div class="line-big margin-big-top">
					<div class="xl2">
						<div class="label">
							<label for="goodsPostageType">商品是否包邮</label>
						</div>
						<div class="field">
							<select class="input" id="goodsPostageType">
								<option value="包邮">卖家包邮</option>
								<option value="自费">买家自费</option>
							</select>
						</div>
					</div>
				</div>

				<div class="line-big margin-big-top">
					<div class="xl6">
						<div class="label">
							<label for="goodsMainPic">*商品主要图片(只能有1张,图片长宽均为400px时显示效果最好.)</label>
						</div>
						<div class="field">
							<textarea class="goodsMainPic_textarea" id="goodsMainPic"></textarea>
						</div>
					</div>
					<div class="xl6">
						<div class="label">
							<label for="goodsGallery">*商品图集(最多5张,图片长宽均为400px时显示效果最好.)</label>
						</div>
						<div class="field">
							<textarea class="goodsGallery_textarea" id="goodsGallery"></textarea>
						</div>
					</div>
				</div>
				<div class="line-big margin-big-top">
					<div class="xl12">
						<div class="label">
							<label for="goodsDetail">商品详细介绍</label>
						</div>
						<div class="field">
							<textarea class="goodsDetail_textarea" id="goodsDetail"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div class="panel-foot bg-white">
				<div class="line-big">
					<div class="xl4"></div>
					<div class="xl4 text-center">
						<button class="button border-blue" id="submit_goods_button">提交商品信息</button>
					</div>
					<div class="xl4"></div>
				</div>
			</div>
		</div>
		<div id="add_success_div" class="G-MarginTop100" style="display: none;">
			<div class="line-big">
				<div class="xl3"></div>
				<div class="xl6 text-center">
					<h1 class="text-center">
						<span class="icon-check-circle text-yellow"></span> 添加商品"<span id="goods_name_success"></span>"成功了。
					</h1>
					<br />
					<p>
						<button class="button bg-blue" id="go_on_add_goods">
							<span class="icon-plus-circle"></span> 继续添加商品
						</button>
						<button class="button bg-green click_go_to_nav_button" data-trigger-id="#sub_see_prepared_goods">
							<span class="icon-cloud-upload"></span> 去上架销售我的商品
						</button>
					</p>
				</div>
				<div class="xl3"></div>
			</div>
		</div>
	</div>
</div>
<div id="rMenu">
	<ul>
		<li id="m_add_grade_1" onclick="add_grade_1_node();">增加一级分类</li>
		<li id="m_add_grade_2" onclick="add_grade_2_node();">增加下级分类</li>
		<li id="m_del" onclick="removeTreeNode();">删除</li>
		<li id="m_reame" onclick="renameTreeNode();">重命名</li>
	</ul>
</div>
<div style="display: none;" id="goodsTypeJson">${goodsTypeJson }</div>
<div style="display: none" id="time_temp_div"></div>
<script type="text/javascript">
	$(function()
	{
		var myDate = new Date();
		$("#time_temp_div").html(myDate.getHours() + "-" + myDate.getMinutes() + "-" + myDate.getSeconds() + "-" + myDate.getMilliseconds());
		$(".goodsMainPic_textarea").attr("id", "goodsMainPic" + $("#time_temp_div").html());
		$(".goodsGallery_textarea").attr("id", "goodsGallery" + $("#time_temp_div").html());
		$(".goodsDetail_textarea").attr("id", "goodsDetail" + $("#time_temp_div").html());
		var option_goodsMainPic =
		{
			initialContent : "",//初始化编辑器的内容
			//textarea:'editorValue',//设置提交时编辑器内容的名字
			initialFrameWidth : "100%", //初始化编辑器宽度,默认1000，可以设置成百分比
			initialFrameHeight : 300, //初始化编辑器高度,默认320
			autoClearinitialContent : false,//是否自动清除编辑器初始内容
			maxImageSideLength : 500,
			wordCount : false,
			toolbars : [ [ 'undo', 'redo', '|', 'insertimage' ] ]
		};
		var option_goodsGallery =
		{
			initialContent : "",//初始化编辑器的内容
			//textarea:'editorValue',//设置提交时编辑器内容的名字
			initialFrameWidth : "100%", //初始化编辑器宽度,默认1000，可以设置成百分比
			initialFrameHeight : 300, //初始化编辑器高度,默认320
			autoClearinitialContent : false,//是否自动清除编辑器初始内容
			maxImageSideLength : 500,
			wordCount : false,
			toolbars : [ [ 'undo', 'redo', '|', 'insertimage' ] ]
		};
		var option_goodsDetail =
		{
			initialContent : "",//初始化编辑器的内容
			//textarea:'editorValue',//设置提交时编辑器内容的名字
			initialFrameWidth : "100%", //初始化编辑器宽度,默认1000，可以设置成百分比
			initialFrameHeight : 300, //初始化编辑器高度,默认320
			autoClearinitialContent : false,//是否自动清除编辑器初始内容
			maxImageSideLength : 900
		};

		var goodsMainPic_editor = UE.getEditor($(".goodsMainPic_textarea").attr("id"), option_goodsMainPic);
		var goodsGallery_editor = UE.getEditor($(".goodsGallery_textarea").attr("id"), option_goodsGallery);
		var goodsDetail_editor = UE.getEditor($(".goodsDetail_textarea").attr("id"), option_goodsDetail);

		$("#submit_goods_button").click(function()
		{
			var goodsName = $("#goodsName").val();
			var goodsPrice = $("#goodsPrice").val();
			var goodsCommission = $("#goodsCommission").val();
			var goodsInventoryNumber = $("#goodsInventoryNumber").val();
			var goodsTypeId = $("#goods_type_id_div").attr("data-value");

			var goodsOperationMode = $("#goodsOperationMode").val();
			var goodsOriginalPrice = $("#goodsOriginalPrice").val();
			var goodsDiscount = $("#goodsDiscount").val();
			var goodsMinBuyNumber = $("#goodsMinBuyNumber").val();
			var goodsBrand = $("#goodsBrand").val();
			var goodsItemId = $("#goodsItemId").val();
			var goodsTips = $("#goodsTips").val();
			var goodsHscode = $("#goodsHscode").val();
			var goodsCiqGoodsNo = $("#goodsCiqGoodsNo").val();
			var goodsCustomsListNo = $("#goodsCustomsListNo").val();
			var goodsPostageType = $("#goodsPostageType").val();

			var goodsMainPic = goodsMainPic_editor.getContent();
			var goodsGallery = goodsGallery_editor.getContent();
			var goodsDetail = goodsDetail_editor.getContent();

			if (goodsName.length <= 0 || goodsPrice.length <= 0 || goodsCommission.length <= 0 || goodsInventoryNumber.length <= 0 || goodsTypeId.length <= 0)
			{
				alert("标有*的输入项都是必填项.")
				return false;
			}
			var tips = "";
			var tips_number = 1;
			$("input[data-regex]").each(function(i, dom)
			{
				var n = $(dom);
				if (new RegExp(n.attr("data-regex")).test(n.val()) == false)
				{
					tips += tips_number++ + " . \"" + n.val() + "\" 不满足输入要求;\n";
				}
			});

			if (tips.length > 0)
			{
				alert(tips + "\n请检查一下重新输入.");
				return false;
			}

			var submit_goods_button_html = $("#submit_goods_button").html();
			$.ajax(
			{
				url : "admin/m_add_goods_do",
				type : "POST",
				dataType : "json",
				beforeSend : function(XMLHttpRequest)
				{
					$("#submit_goods_button").attr("disabled", "disabled");
					$("#submit_goods_button").html("正在提交商品信息中...");
				},
				data :
				{
					'goods.goodsName' : goodsName,
					'goods.goodsPrice' : goodsPrice,
					'goods.goodsCommission' : goodsCommission,
					'goods.goodsInventoryNumber' : goodsInventoryNumber,
					'goods.goodsTypeId' : goodsTypeId,
					'goods.goodsOperationMode' : goodsOperationMode,
					'goods.goodsOriginalPrice' : goodsOriginalPrice,
					'goods.goodsDiscount' : goodsDiscount,
					'goods.goodsMinBuyNumber' : goodsMinBuyNumber,
					'goods.goodsBrand' : goodsBrand,
					'goods.goodsItemId' : goodsItemId,
					'goods.goodsHscode' : goodsHscode,
					'goods.goodsCiqGoodsNo' : goodsCiqGoodsNo,
					'goods.goodsCustomsListNo' : goodsCustomsListNo,
					'goods.goodsTips' : goodsTips,
					'goods.goodsPostageType' : goodsPostageType,
					'goods.goodsMainPic' : goodsMainPic,
					'goods.goodsGallery' : goodsGallery,
					'goods.goodsDetail' : goodsDetail,
				},
				success : function(json, textStatus)
				{
					if (json.success == true)
					{
						$("#goods_name_success").html(goodsName);
						$("#write_goods_info_div").slideUp();
						$("#add_success_div").slideDown(function()
						{
							$(".admin").animate(
							{
								scrollTop : 0
							}, 0);
						});

					}
					else
					{
						alert(json.info);
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown)
				{
					alert("提交失败，请仔细检查您的输入是否满足要求。");
				},
				complete : function(XMLHttpRequest, textStatus)
				{
					$("#submit_goods_button").removeAttr("disabled");
					$("#submit_goods_button").html(submit_goods_button_html);
				}
			});
		});

		$("#go_on_add_goods").click(function()
		{
			$("#add_success_div").slideUp();
			$("#write_goods_info_div").slideDown(function()
			{
				$("#goodsName").val("");
				$("#goodsPrice").val("");
				$("#goodsCommission").val("");
				$("#goodsInventoryNumber").val("");

				$("#goodsOriginalPrice").val("");
				$("#goodsDiscount").val("");
				$("#goodsMinBuyNumber").val("");
				$("#goodsBrand").val("");
				$("#goodsItemId").val("");
				$("#goodsTips").val("");
				$("#goodsHscode").val("");
				$("#goodsCiqGoodsNo").val("");
				$("#goodsCustomsListNo").val("");
				$("#goodsPostageType").val("");

				goodsMainPic_editor.execCommand('cleardoc');
				goodsGallery_editor.execCommand('cleardoc');
				goodsDetail_editor.execCommand('cleardoc');
			});
		});
	});

	var setting =
	{
		view :
		{
			dblClickExpand : false,
			showLine : false
		},
		data :
		{
			simpleData :
			{
				enable : true
			}
		},
		view :
		{
			selectedMulti : false
		},
		callback :
		{
			onClick : onClick,
			onRightClick : OnRightClick
		}
	};

	var zNodes = eval('(' + $("#goodsTypeJson").html() + ')');

	function onClick(e, treeId, treeNode)
	{
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		//zTree.expandNode(treeNode);
		$("#goods_type_id_div").html(treeNode.name);
		$("#goods_type_id_div").attr("data-value", treeNode.id);
	}
	function OnRightClick(event, treeId, treeNode)
	{
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0)
		{
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		}
		else if (treeNode && !treeNode.noR)
		{
			zTree.selectNode(treeNode);
			//alert("node" + treeNode.grade+","+("node" + treeNode.grade).length);
			showRMenu("node" + treeNode.grade, event.clientX, event.clientY);
		}
	}
	function showRMenu(type, x, y)
	{
		$("#rMenu ul").show();
		if (type == "root")
		{
			$("#m_add_grade_1").show();
			$("#m_add_grade_2").hide();
			$("#m_del").hide();
			$("#m_reame").hide();
		}
		else
		{
			$("#m_del").show();
			$("#m_reame").show();
			if (type == "node1")
			{
				$("#m_add_grade_1").hide();
				$("#m_add_grade_2").show();
			}
			if (type == "node2")
			{
				$("#m_add_grade_1").hide();
				$("#m_add_grade_2").show();
			}
			if (type == "node3")
			{
				$("#m_add_grade_1").hide();
				$("#m_add_grade_2").hide();
			}
		}
		rMenu.css(
		{
			"top" : y + "px",
			"left" : x + "px",
			"visibility" : "visible"
		});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	function add_grade_1_node()
	{
		hideRMenu();
		var type_name_str = prompt("请输入类型名称,批量添加中间用英文逗号,隔开");
		if (type_name_str.length <= 0)
		{
			alert("不满足类型名称要求");
			return false;
		}
		$.post("goods_type/goods_type_add_do",
		{
			"goodsType.goodsTypeName" : type_name_str
		}, function(json)
		{
			if (json.success == false)
			{
				alert(json.info);
			}
			else
			{
				$.each(json.goodsType, function(i, n)
				{
					var newNode =
					{
						id : n.goodsTypeId,
						name : n.goodsTypeName,
						pId : n.goodsTypeParentId,
						grade : 1
					};
					zTree.addNodes(null, newNode);
				});
			}
		},
		//返回类型
		"json");
	}
	function add_grade_2_node()
	{
		hideRMenu();
		var type_name_str = prompt("请输入类型名称");
		if (type_name_str.length <= 0)
		{
			alert("不满足类型名称要求");
			return false;
		}
		var newNode =
		{
			name : type_name_str
		};
		if (zTree.getSelectedNodes()[0])
		{
			$.post("goods_type/goods_type_add_do",
			{
				"goodsType.goodsTypeName" : type_name_str,
				"goodsType.goodsTypeParentId" : zTree.getSelectedNodes()[0].id
			}, function(json)
			{
				if (json.success == false)
				{
					alert(json.info);
				}
				else
				{

					$.each(json.goodsType, function(i, n)
					{
						var newNode =
						{
							id : n.goodsTypeId,
							name : n.goodsTypeName,
							pId : n.goodsTypeParentId,
							grade : parseInt(zTree.getSelectedNodes()[0].grade) + 1
						};
						newNode.checked = zTree.getSelectedNodes()[0].checked;
						zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
					});
				}
			},
			//返回类型
			"json");
		}
	}
	function removeTreeNode()
	{
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length > 0)
		{
			if (nodes[0].children && nodes[0].children.length > 0)
			{
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
				if (confirm(msg) == true)
				{
					var ids = [];
					ids = getChildren(ids, nodes[0]);
					$.post("goods_type/goods_type_delete_do",
					{
						"commonStr" : ids.toString()
					}, function(json)
					{
						if (json.success == false)
						{
							alert(json.info);
						}
						else
						{
							zTree.removeNode(nodes[0]);
						}
					},
					//返回类型
					"json");
				}

			}
			else
			{
				$.post("goods_type/goods_type_delete_do",
				{
					"commonStr" : nodes[0].id
				}, function(json)
				{
					if (json.success == false)
					{
						alert(json.info);
					}
					else
					{
						zTree.removeNode(nodes[0]);
					}
				},
				//返回类型
				"json");
			}
		}
	}

	//ids是一个数组 返回结果数组     treeNode是选中的节点
	function getChildren(ids, treeNode)
	{
		ids.push(treeNode.id);
		if (treeNode.isParent)
		{
			for ( var obj in treeNode.children)
			{
				getChildren(ids, treeNode.children[obj]);
			}
		}
		return ids;
	}
	function renameTreeNode()
	{
		hideRMenu();
		var type_name_str = prompt("请输入类型名称");
		if (type_name_str.length <= 0)
		{
			alert("不满足类型名称要求");
			return false;
		}
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length > 0)
		{
			$.post("goods_type/goods_type_update_do",
			{
				"goodsType.goodsTypeId" : nodes[0].id,
				"goodsType.goodsTypeName" : type_name_str
			}, function(json)
			{
				if (json.success == false)
				{
					alert(json.info);
				}
				else
				{
					nodes[0].name = type_name_str;
					zTree.updateNode(nodes[0]);
				}
			},
			//返回类型
			"json");
		}
	}

	function hideRMenu()
	{
		if (rMenu)
			rMenu.css(
			{
				"visibility" : "hidden"
			});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event)
	{
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0))
		{
			rMenu.css(
			{
				"visibility" : "hidden"
			});
		}
	}
	var zTree, rMenu;
	$(document).ready(function()
	{
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
		rMenu = $("#rMenu");
	});
</script>